<template class="">
	<view>
		<image class="top_img" :src="img_src + 'tcc.png'" mode=""></image>
		<text class="title_h1">{{parking.name}}</text>
		<view class="flex" style="margin: 0 24rpx;">
			<view class="paratext flex-twice">
				<view class="margin-top-xs text-gray">
					{{parking.address}} ( 距您{{parking.distance}} ）
				</view>
				<view>
					<icon class="iconfont icon-shijian text-green"></icon>
					开放时间：
					{{parking.Time ? 'parking.Time' : '暂无'}}
				</view>
			</view>
			<view class="flex-sub flex features">
				<view class="flex-sub" @click="openMapRoute(parking.x,parking.y,parking.name)">
					<icon class="iconfont icon-daohang text-blue"></icon>
					<br>
					<text>导航</text>
				</view>
				<view class="flex-sub" @click="openMakePhone(parking.telephone)">
					<icon class="iconfont icon-dianhua text-green"></icon>
					<br>
					<text>联系电话</text>
				</view>
			</view>
		</view>
		<view class="parting"></view>
		<view>
			<view class="summary_tit">
				<text class="cylinder"> </text>简介
			</view>
			<view class="summary">
				{{parking.note ? parking.note : '暂无'}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				parking:{},
				img_src: this.$utils.SYS_URL + this.$utils.IMG_URL,
			}
		},
		onLoad(option){
			this.parking=JSON.parse(option.item);
		},
		methods: {
			openMakePhone(phone) {
				if(phone == null || phone == '') {
					this.$utils.msg("暂无联系电话");
					return;
				}
				uni.makePhoneCall({
					phoneNumber: phone, 
					success: (res) => {}
				});
			},
			openMapRoute(longitude,latitude,location) {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						uni.openLocation({
							latitude: Number.parseFloat(latitude),
							longitude: Number.parseFloat(longitude),
							address: location,
							success: function () {
							}
						});
					},
					fail: function () {
						uni.showToast({
							title: '获取地址失败，将导致地图导航无法使用',
							icon:'none'
						});
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	.top_img{
		width: 702rpx;
		height: 390rpx;
		margin: 24rpx;
		border-radius: 20rpx;
	}
	.title_h1{
		margin: 0 24rpx;
		font-weight:bold;
		font-size: 36rpx;
	}
	.paratext{
		font-size: 26rpx;
		color: #999;
		line-height: 56rpx;
	}
	.paratext>view>.iconfont:nth-of-type(1){
		margin-right: 8rpx;
	}
	.paratext .iconfont{
		font-size: 26rpx;
	}
	.features{
		margin-top: 20rpx;
		text-align: center;
		font-size: 22rpx;
	}
	.features .iconfont{
		margin-bottom: 12rpx;
	}
	.parting{
		margin-top: 30rpx;
		height: 20rpx;
		width: 100%;
		background-color: #F4F5F6;
	}
	.summary_tit{
		font-weight: bold;
		font-size: 30rpx;
		margin: 24rpx 0 0 24rpx;
	}
	.summary_tit .cylinder::after{
		content: ".";
		color: #E64C14;
		width: 10rpx;
		height: 36rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
		background-color: #E64C14;
	}
	.summary{
		text-indent: 2em;
		margin: 24rpx 24rpx 0 24rpx;
		font-size: 28rpx;
	}
</style>
